<template>
	<view class="container">						
		<view class="all_card">
			<view class="title">
				<image src="../../static/icon/yinhangka.png"></image>
				<text>当前用户所有银行卡</text>
			</view>			
			<view class="card-item" v-for="(item,index) in cardList" :key="item.accountNumber" @click="goCardDetail(item.accountNumber,'SAVI')">
				<view>
					卡号：{{item.accountNumber}}
				</view>
				<view>
					类型：{{item.cardType=='SAVI'?'储蓄卡':'活期账户'}}
				</view>
				<view>
					当前状态：{{item.accountStatus=='A'?'可用':'不可用'}}
				</view>
			</view>			
			
			<view class="card-item" v-for="(item,index) in creditCardList" :key="item.accountNumber" @click="goCardDetail(item.accountNumber,'CRED')">
				<view>
					卡号：{{item.accountNumber}}
				</view>
				<view>
					类型：信用卡
				</view>
				<view>
					当前状态：{{item.accountStatus=='A'?'可用':'不可用'}}
				</view>
			</view>
		</view>
			
	</view>
</template>

<script>
	import Global from '../../common/global.js'	
	import {formatDate} from '../../common/filter.js'
	
	export default {
		data() {
			return {
				customerNumber:'',
				customerName:'',
				token:'',
				bindCardList:[],
				cardList:[],				
				creditCardList:[],
				
			}
		},
		methods: {			
			//查询当前用户所有关联银行卡列表
			getAccountsList(){		
				
				uni.showLoading({
				    title: '正在读取'
				});
				
				uni.request({
					url: Global.BASE_URL + '/ewallet/queryAccountByCustomer',
					header:{
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						customerNumber:this.customerNumber,
						index:0,
						items:100
					},
					method:'POST',
					success:(res)=>{ //注意使用箭头函数	 
																
						//储蓄卡列表\活期账户列表
						this.cardList = res.data.dataList
						
						//信用卡列表
						this.creditCardList = res.data.credDataList
						
						console.log(res)
						
					},
					fail(err) {
						uni.showToast({
							title:'查询用户银行卡列表接口调用失败',
							icon:'none'
						})
					},
					complete() {
						uni.hideLoading()
					}
				})				
			},
			//导航到账户详细信息
			goCardDetail(accountNumber,accountType){
				
				//储蓄卡，活期账户				
				if (accountType == 'SAVI' || accountType == 'CURR') {
					uni.navigateTo({
						url:'../card-detail/card-detail?accountNumber=' + accountNumber + '&accountType=' + accountType
					})
				}
				
				//信用卡
				if (accountType == 'CRED') {
					uni.navigateTo({
						url:'../cred-card-detail/cred-card-detail?accountNumber=' + accountNumber
					})
				}
			}
		},
		onLoad() {				
				
		},
		onShow() {
			//读取出客户编号
			this.customerNumber = uni.getStorageSync('customerNumber')						
			//调用查询当前用户关联银行卡列表
			this.getAccountsList();
		},
		filters:{ 
			formatDate (time) { //日期时间过滤器
				let date = new Date(time)
				return formatDate(date, 'yyyy-MM-dd hh:mm')
			},
			cardType (type) {
				if (type == 'SAVI')
					return "储蓄卡"
				if (type == 'CURR')
					return "活期账户"
				if (type == 'CRED')
					return "信用卡"
			}
		}
	}
</script>

<style>
	
	page {
		background: #EDEDED;
	}
	
	.container {
		padding: 15rpx;
	}
	
	.all_card {
		padding: 30rpx;
		font-size: 30rpx;		
		background-color: #FFFFFF;
		border-radius: 25rpx;
		margin-bottom: 30rpx;
	}
	
	.all_card .title {
		color: #333333;
		font-weight: bold;
		height: 80rpx;
		line-height: 80rpx;			
	}
	
	.all_card .title image {
		width: 80rpx;
		height: 80rpx;
		float: left;
	}
	
	.all_card .title text {
		float: left;
		padding-left: 40rpx;
	}
	
	.all_card .card-item {
		color: #FFFFFF;
		background: #66CCFF;
		padding: 10rpx;
		margin-bottom: 20rpx;
		border-radius: 15rpx;
		line-height: 50rpx;
	}
	
	.all_card .card-item {
		background-color: #FF9999;
	}	
</style>